<template>
	<view class="example">
		<!-- 基础用法，不包含校验规则 -->
		<uni-forms ref="form" :modelValue="baseFormData" :rules="rules">
			<uni-forms-item label="小区">
				<uni-data-picker placeholder="请选择小区" popup-title="请选择所在小区" :localdata="dataTree"
					v-model="baseFormData.communityId" @change="onchange" @nodeclick="onnodeclick"
					@popupopened="onpopupopened" @popupclosed="onpopupclosed">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="楼栋">
				<uni-data-picker placeholder="请选择楼栋" popup-title="请选择所在楼栋" :localdata="buildingData"
					v-model="baseFormData.buildingId" @change="onchange" @nodeclick="buildingclick"
					@popupopened="onpopupopened" @popupclosed="onpopupclosed">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="单元">
				<uni-data-picker placeholder="请选择单元" popup-title="请选择所在单元" :localdata="cellData"
					v-model="baseFormData.cellId" @change="onchange" @nodeclick="cellclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="楼层">
				<uni-data-picker placeholder="请选择楼层" popup-title="请选择所在楼层" :localdata="floorData"
					v-model="baseFormData.floorId" @change="onchange" @nodeclick="floorclick"
					@popupopened="onpopupopened" @popupclosed="onpopupclosed">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="户号">
				<uni-data-picker placeholder="请选择户号" popup-title="请选择所在户号" :localdata="portalData"
					v-model="baseFormData.portalId" @change="onchange" @nodeclick="portalclick"
					@popupopened="onpopupopened" @popupclosed="onpopupclosed" style="width: 300px;">
				</uni-data-picker>
			</uni-forms-item>
			<!-- 	<uni-forms-item label="房屋" name="middleId">
				<uni-easyinput type="text" v-model="baseFormData.middleId" placeholder="请输入房屋" />
			</uni-forms-item> -->
			<uni-forms-item label="访客姓名" name="visitorsName">
				<uni-easyinput type="text" v-model="baseFormData.visitorsName" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="visitorsAge">
				<uni-data-checkbox v-model="baseFormData.visitorsAge" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="手机号码" name="visitorsPhone">
				<uni-easyinput type="text" v-model="baseFormData.visitorsPhone" placeholder="请输入手机号码" />
			</uni-forms-item>
			<uni-forms-item label="访问日期" name="accessTime">
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.accessTime" />
			</uni-forms-item>
			<uni-forms-item label="访问时长" name="endTime">
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.endTime" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submitForm" class="button-login" hover-class="button-hover">邀请访客</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uu: {},
				protId: '',
				floorData: [],
				portalData: [],
				communityId: '',
				cellId: '',
				dataTree: [],
				buildingData: [],
				cellData: [],
				floorId: '',
				// 基础表单数据
				baseFormData: {
					protId: '',
					portalId: '',
					floorId: '',
					cellId: '',
					buildingId: '',
					communityId: '',
					visitorsName: '',
					middleId: '',
					visitorsPhone: '',
					visitorsAge: 0,
					accessTime: '',
					endTime: '',
					portalId: '',
					userId: 1,

				},
				// 单选数据源
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, ],
				// 校验规则
				rules: {
					// 对name字段进行必填验证
					middleId: {
						rules: [{
							required: true,
							errorMessage: '请输入房屋',
						}, ]
					},
					visitorsName: {
						rules: [{
							required: true,
							errorMessage: '请输入访客姓名',
						}, ]
					},
					visitorsPhone: {
						rules: [{
							required: true,
							errorMessage: '请选择手机号码',
						}, ]
					},
					accessTime: {
						rules: [{
							required: true,
							errorMessage: '请选择访问日期',
						}, ]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请输入访问时长',
						}, ]
					},
				}
			}
		},
		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		onLoad() {
			this.findCommunity()
		},
		methods: {
			cellclick(e) {
				this.cellId = e.value
				this.findFloor()
				this.floorData = []
				console.log(e)
			},
			floorclick(e) {
				this.floorId = e.value
				this.findPortal()
				this.portalData = []
				console.log(this.floorId);
				console.log(e)
			},
			buildingclick(e) {
				this.buildingId = e.value
				this.findCell()
				this.cellData = []
				console.log(e)
			},
			onnodeclick(e) {
				this.communityId = e.value
				this.findBuilding()
				this.buildingData = []
				console.log(this.communityId);
				console.log(e);
			},
			buildingclick(e) {
				this.buildingId = e.value
				this.findCell()
				this.cellData = []
				console.log(e)
			},
			findCommunity() {
				this.$axios({
					url: '/housingestate/community/appFindAllCommunity',
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log("11111111111111111111", res.data.data.community)
							let aa = res.data.data.community
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: aa[i].communityName,
									value: aa[i].communityId
								}
								this.dataTree.push(param)
							}

						}
					}
				})
			},
			findBuilding() {
				this.$axios({
					url: '/housingestate/building/appFindBuilding/' + this.communityId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.Building)
							let aa = res.data.data.Building
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].howMany + "栋",
									value: aa[i].buildingId
								}
								this.buildingData.push(param)
							}

						}
					}
				})
			},
			findCell() {
				this.$axios({
					url: '/housingestate/cell/appFindCell/' + this.buildingId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.cell)
							let aa = res.data.data.cell
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].cellNumber + "单元",
									value: aa[i].cellId
								}
								this.cellData.push(param)
							}

						}
					}
				})
			},
			findFloor() {
				this.$axios({
					url: '/housingestate/floor/appFindFloor/' + this.cellId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.floor)
							let aa = res.data.data.floor
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].howFloor + "层",
									value: aa[i].floorId
								}
								this.floorData.push(param)
							}

						}
					}
				})
			},
			findPortal() {
				this.$axios({
					url: '/housingestate/portal/appFindPortal/' + this.floorId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.portal)
							let aa = res.data.data.portal
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: "0" + aa[i].howPortal,
									value: aa[i].portalId
								}
								this.portalData.push(param)
							}

						}
					}
				})
			},
			seetreeunder() {
				this.$axios({
					url: '/housingestate/cell-intermediate/seetreeunder',
					data: {
						communityId: this.communityId,
						buildingId: this.buildingId,
						cellId: this.cellId,
						floorId: this.floorId,
						portalId: this.portalId,
						userId: "",
					},
					method: 'GET',
					success: (res) => {
						if (res.data.success == true) {
							console.log(res, "eeeeeeeeeeeeeeeeeeeeeeeeeeeeee")
							this.uu = res.data.data.id
							this.baseFormData.middleId = this.uu.middleId
							console.log(this.baseFormData.middleId,
								"mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm")
						}
					}
				})
			},

			portalclick(e) {
				this.portalId = e.value
				this.seetreeunder()
				console.log(this.portalId, "hhhhhhhhhhhhhhhhhhhhhhhh")
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			// 提交按钮
			submitForm(ref) {
				this.$refs.form.validate().then(res => {
					debugger
					if (res) {
						const tt = res
						this.$axios({
							url: '/systemuser/visitors-record/insertvisitorsrecord',
							data: this.baseFormData,
							method: 'POST',
							success: (res) => {
								console.log(this.baseFormData,"fffffffffffffffffffffffffffffffff")
								if (res.data.code == 2000) {
									uni.reLaunch({
										url: `./example?item=${encodeURIComponent(JSON.stringify(tt))}`,
										// url:'./example?item='+JSON.stringify(this.baseFormData),
									})
								}
							}
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}

	}
</script>

<style>
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
